<div class="info">
	<div class="item-content">
		Paginated Drop Down plugin is used to display the results fetched using an AJAX call in a paginated fashion. This plugin is totally
		configurable and internally uses the JS Template plugin to convert an array of simple json objects into structured HTML. However using
		JS Template is totally optional and is provided as an add-on feature. This plugin also uses the Component Reposition plugin to position
		the drop-down container with respect to the input text box container.
	</div>
	
	<div class="item-content-info">
		<div class="info-item">
			API:<br/>
			-<span class="indent4px">initialize( object config )</span>
		</div>
		<table class="indent4px info-item">
			<tr valign="top">
				<th>Parameter</th>
				<th class="nowrap">Parameter Type</th>
				<th class="nowrap">Default Value</th>
				<th>Description</th>
			</tr>
			<tr valign="top">
				<td>inputSelector<span class="mandatory">*</span></td>
				<td class="nowrap">string</td>
				<td>-</td>
				<td>
					This property is mandatory. It is the CSS selector to uniquely define the input box. This value would be used to position
					the close button with respect to the input box. This property will also be used inside the click event attached to the close
					button (basically to clear the input box).  
				</td>
			</tr>
			<tr valign="top">
				<td>inputContainerSelector<span class="mandatory">*</span></td>
				<td class="nowrap">string</td>
				<td class="nowrap">-</td>
				<td>
					This property is mandatory. It is the CSS selector to uniquely define the immediate HTML container/parent of the input box.
					The drop down would be positioned with respect to this container. The width of the drop down container would also be 
					determined using this property.
				</td>
			</tr>
			<tr valign="top">
				<td>baseId</td>
				<td class="nowrap">string</td>
				<td class="nowrap">dropdown-container</td>
				<td>
					This property is internally used by the plugin but can overridden if need be.
				</td>
			</tr>
			<tr valign="top">
				<td>baseCls</td>
				<td class="nowrap">string</td>
				<td class="nowrap">dropdown-container</td>
				<td>
					This property is internally used by the plugin but can overridden if need be.
				</td>
			</tr>
			<tr valign="top">
				<td>dropdownCloseBtnId</td>
				<td class="nowrap">string</td>
				<td class="nowrap">dropdown-container-close</td>
				<td>
					This property is internally used by the plugin but can overridden if need be.
				</td>
			</tr>
			<tr valign="top">
				<td>itemsPerPage</td>
				<td class="nowrap">number</td>
				<td>5</td>
				<td>
					This property specifies the number of items to be shown in the drop down container.
				</td>
			</tr>
			<tr valign="top">
				<td>dropdownPosition</td>
				<td class="nowrap">string</td>
				<td>bottom</td>
				<td>
					This property specifies the position of the drop down container. It is internally used by the Component Reposition plugin.
				</td>
			</tr>
			<tr valign="top">
				<td>closeBtnPosition</td>
				<td class="nowrap">string</td>
				<td>right</td>
				<td>
					This property specifies the position of the drop down close button. It is internally used by the Component Reposition plugin.
				</td>
			</tr>
			<tr valign="top">
				<td>template</td>
				<td class="nowrap">string</td>
				<td>null</td>
				<td>
					This property specifies the template that has to be used with the items passed to constructDropDown method. Please refer the
					documentation of JS Template plugin on how to specify the templateKey's in the template.
				</td>
			</tr>
		</table><br/>

		<div class="info-item">
			-<span class="indent4px">constructDropDown( array items, boolean useTemplate )</span>
		</div>
		<table class="indent4px info-item">
			<tr valign="top">
				<th>Parameter</th>
				<th class="nowrap">Parameter Type</th>
				<th class="nowrap">Default Value</th>
				<th>Description</th>
			</tr>
			<tr valign="top">
				<td>items<span class="mandatory">*</span></td>
				<td class="nowrap">array</td>
				<td>-</td>
				<td>
					This argument is mandatory. It is an array of objects. However, the object can either be a simple json object or a HTML
					structure. If you <b>do not</b> want to construct an array of HTML structures and pass it to this method, you can opt to
					use the JS Template plugin which would dynamically create HTML structure based on the template and properties of the json 
					object. Please refer the documentation of JS Template plugin for more information.
				</td>
			</tr>
			<tr valign="top">
				<td>useTemplate</td>
				<td class="nowrap">boolean</td>
				<td>false</td>
				<td>
					If you choose to pass in an array of HTML structures as items of this method you can simply avoid passing this argument in
					the method. However, if you pass this argument as true, then you have to make sure that you specify the template property
					in the config objet and pass in items as per the specification of the JS Template plugin. Please refer the documentation of
					JS Template plugin for more information. 
				</td>
			</tr>
		</table>
		
		<div class="info-item">
			Usage:&nbsp;<span class="demo x-paginatedDropDown">Demo</span><br/>
			-<span class="indent4px">dropdown_plugin.initialize( config )</span><br/>
			-<span class="indent4px">dropdown_plugin.constructDropDown( [{},{},{}], true )</span><br/>
		</div>
		
		<div class="info-item">
			Download:<br/>
			-<span class="indent4px">
				<a href="PaginatedDropDown/widget/paginated-drop-down-widget.js" target="_blank">paginated-drop-down-widget.js</a>
			</span><br/>
			-<span class="indent4px">
				<a href="PaginatedDropDown/style/paginated-drop-down-widget-style.css" target="_blank">paginated-drop-down-widget-style.css</a>
			</span><br/>
		</div>
		
		<div class="info-item">
			Tags:<br/>
			-<span class="indent4px">jQuery widget / paginated drop down</span>
		</div>
	</div>
</div>